<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>负载均衡解析</title>
    <#include "/header.html">

    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <script src="${request.contextPath}/statics/plugins/layui/layui.all.js"></script>

</head>
<body>
<style>
    .bootstrap-select{
        width: 100% !important;
    }
    .layui-form-label{
        width: 120px;
    }
    .layui-input-block{
        margin-left: 120px;
    }
    .layui-form-item{
        width:500px;
    }
</style>
<div class="layui-container" style="width: 100%;margin-top: 20px;">
    <form class="layui-form" action="">
        <div class="layui-row" >
            <div class="layui-col-md12" >
                <div class="layui-form-item" >
                    <label class="layui-form-label" >密钥id</label>
                    <div class="layui-input-block" >
                        <input type="text"  required  id="accessKeyId"  autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row" >
            <div class="layui-col-md12" >
                <div class="layui-form-item" >
                    <label class="layui-form-label" >密钥</label>
                    <div class="layui-input-block" >
                        <input type="text"  required  id="secret"  autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row" >
            <div class="layui-col-md12" >
                <div class="layui-form-item" >
                    <label class="layui-form-label" >地区id</label>
                    <div class="layui-input-block" >
                        <select class="selectpicker" id="regionId" data-live-search="true" title="地区id"  style="width:100%;" >

                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row" >
            <div class="layui-col-md12" >
                <div class="layui-form-item" >
                    <label class="layui-form-label" >创建数量</label>
                    <div class="layui-input-block" >
                        <input type="text"  required  id="createNum"  autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row" >
            <div class="layui-col-md12" >
                <div class="layui-form-item" >
                    <label class="layui-form-label" >负载均衡规格</label>
                    <div class="layui-input-block" >
                        <select class="selectpicker" id="loadBalancerSpec" title="负载均衡规格"  style="width:100%;" >
                            <option value="slb.s1.small">slb.s1.small</option>
                            <option value="slb.s2.small">slb.s2.small</option>
                            <option value="slb.s2.medium">slb.s2.medium</option>
                            <option value="slb.s3.small">slb.s3.small</option>
                            <option value="slb.s3.medium">slb.s3.medium</option>
                            <option value="slb.s3.large">slb.s3.large</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row" >
            <div class="layui-col-md12" >
                <div class="layui-form-item" style="width: 600px;" id="portbox">
                    <label class="layui-form-label" >负载均衡端口</label>
                    <div class="layui-input-block" >
                        <div class="layui-col-md5" >
                            <input type="text"  required style="width: 90%;" placeholder="前端端口"  autocomplete="off" class="layui-input bvalue">
                        </div>
                        <div class="layui-col-md5" >
                            <input type="text"  required style="width: 90%;" placeholder="后端端口" autocomplete="off" class="layui-input avalue">
                        </div>
                        <div class="layui-col-md2" >
                            <div class="btn btn-primary" onclick="addport()">增加</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="layui-row" >
            <div class="layui-col-md12" >
                <div class="layui-form-item" style="width: 600px;" id="serverbox">
                    <label class="layui-form-label" >后端服务器</label>
                    <div class="layui-input-block" >
                        <div class="layui-col-md10" >
                            <input type="text"  required style="width: 95%;" placeholder="后端服务器id"  autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-col-md2" >
                            <div class="btn btn-primary" onclick="addserver()">增加</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row" >
            <div class="layui-col-md6" style="padding-left: 20px;">
                <div class="layui-btn" id="btnconfirm">确定</div>
                <div class="layui-btn layui-btn-warm" id="btnreturn">返回</div>
            </div>
        </div>
    </form>
</div>


<script>
    $(function(){
        $.ajax({
            type: "get",
            url: baseURL + "aliyunSlbRegion/getAliyunSlbDescribeRegions",
            dataType: "json",
            success: function (data) {
                if (data.code == 0) {
                    var _html = ''
                    for (var i = 0; i < data.result.length; i++) {
                        _html = _html + '<option value="' + data.result[i].regionIdStr + '">' + data.result[i].localName + '</option>'
                    }
                    $('#regionId').html(_html);
                    $('#regionId').selectpicker('refresh');
                }
            }
        })
        $('#btnconfirm').click(function(){
            if(!$('#accessKeyId').val() || !$('#secret').val()||!$('#regionId').val()||!$('#createNum').val()||!$('#loadBalancerSpec').val()){
                layer.msg('内容不能为空')
                return false;
            }

            var obj = {
                "accessKeyId":$('#accessKeyId').val(),
                "secret":$('#secret').val(),
                "regionId":$('#regionId').val(),
                "createNum":$('#createNum').val(),
                'listenerInfo':[],
                'backendServer':[],
                'loadBalancerSpec':$('#loadBalancerSpec').val()
            }
            for(var i=0;i<$('#portbox .layui-input-block').length;i++){
                if(!$('#portbox .layui-input-block').eq(i).find('.bvalue').val()|| !$('#portbox .layui-input-block').eq(i).find('.avalue').val()){
                    layer.msg('负载均衡端口不能为空')
                    return false;
                }
                obj.listenerInfo.push({
                    listenerPort:$('#portbox .layui-input-block').eq(i).find('.bvalue').val(),
                    backendServerPort:$('#portbox .layui-input-block').eq(i).find('.avalue').val()
                })
            }
            $('#serverbox .layui-input').each(function(index){
                if(!$(this).val()){
                    layer.msg('后端服务器ID不能为空')
                    return false;
                }
                obj.backendServer.push({
                    serverId:$(this).val()
                })
            })
            var indexloading = layer.load(2)
            $.ajax({
                type: "post",
                url: baseURL + "aliyunSlbOperator/dynamicCreateAliyunSlb",
                dataType: "json",
                data:JSON.stringify(obj),
                contentType:"application/json",
                success: function (data) {
                    console.log(data,'sssssssssssss')
                    layer.close(indexloading)
                }
            })
        })
    })
    var portindex = 0;
    function addport(){
        portindex++;
        var _html = '<div class="layui-input-block" id="portid'+portindex+'" style="margin-top: 20px">' +
            '<div class="layui-col-md5" >' +
            '<input type="text"  required style="width: 90%;" placeholder="前端端口"  autocomplete="off" class="layui-input bvalue">' +
            '</div>' +
            '<div class="layui-col-md5" >' +
            '<input type="text"  required style="width: 90%;" placeholder="后端端口" autocomplete="off" class="layui-input avalue">' +
            '</div>' +
            '<div class="layui-col-md2" >' +
            '<div class="btn btn-danger" onclick="removeport('+portindex+')">删除</div>' +
            '</div>' +
            '</div>'
        $('#portbox').append(_html);
    }
    function removeport(e){
        $('#portid'+e).remove()
    }
    var serverindex =0;
    function addserver(){
        serverindex++;
        var _html = '<div class="layui-input-block" id="server'+serverindex+'" style="margin-top: 20px">' +
            '<div class="layui-col-md10" >' +
            '<input type="text"  required style="width: 95%;" placeholder="后端服务器id"  autocomplete="off" class="layui-input">' +
            '</div>' +
            '<div class="layui-col-md2" >' +
            '<div class="btn btn-danger" onclick="removeserver('+serverindex+')">删除</div>' +
            '</div>' +
            '</div>'
        $('#serverbox').append(_html);
    }
    function removeserver(e){
        $('#server'+e).remove()
    }
</script>
</body>
</html>